<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 20px;
    }

    body {
      /* margin: 0; */
      font-size: 50px;

    }

    h1 {
      /* 文字颜色 */
      /* 单词表示法 */
      /* color: red; */
      /* RGB(RED,GREEN,BLUE) */
      /* color: rgb(100%, 0%, 0%); */
      /* color: rgb(255, 0, 0); */

      /* 16进制 */
      color: #ff0000;
      color: rgba(255, 0, 0, 0.2);
    }

    #div1 {
      /* width: 200px; */

      /* 相对于父元素的对应属性的值 */
      /* width: 50%; */

      /* 相对于浏览器可视窗口的宽度vw   高度vh */
      /* width: 50vw; */

      /* 相对于父元素的字体大小 */
      /* width: 1em; */

      /* 相对于根元素（html）的字体大小 */
      width: 10rem;

      /*   */
      height: 200px;
      background: rgb(42, 157, 136);

      /* 复合属性 */
      /* padding: 20px; */
      padding-top: 20px;
      padding-bottom: 50px;
      border: 5px solid #000;
      /* 能合着不拆开 */
      /* margin: 10px 20px 30px 40px; */

      /* box-sizing: border-box; */

      /* display: inline; */
      /* 
        盒模型：
          content（蓝色）：元素的内容区域所占据的空间
            1、若没有特意设置宽高，则content区域的大小由内容撑开
            2、若设置了宽高，则在【标准盒模型】的情况下，content区域的大小就是设置的值
            3、【怪异盒模型】
          padding（绿色）： 设置content区域和外层的距离的 
          border（黄色）：  
          margin（橙色）： 将其他元素从自己身边推开 

        块：默认宽度为父元素的宽度，高度由内容撑开；可以设置宽高；    block
        行：宽高都由内容撑开；不能设置宽高； inline

        块  《=》  行
      */
    }

    .sp {

      /* display: block; */
      /* display: inline-block; */

      width: 200px;
      height: 200px;
      background: rgb(157, 41, 41);
    }

    #div2 {
      /* 文字系列 */
      color: blue;
      font-size: 20px;
      font-weight: 800;
      font-style: italic;
      /* 字体 */
      font-family: 'Courier New', Courier, monospace;

      /* 文本系列 */
      text-decoration: none;
      /* 文本对齐 */
      /* text-align: center; */
      /* 首行缩进 */
      text-indent: 40px;
      /* 行高：可以控行距 */
      line-height: 40px;

      /* 透明度 ：0-1之间*/
      opacity: 0.5;
      /* 文本加边框 */
      border: 1px solid black;
      /* 边框角变圆 */
      border-radius: 20px;
    }

    a {
      text-decoration: none;
    }

    li {
      /* 把列表的小点设没 */
      list-style: none;
    }

    #div3 {
      width: 500px;
      height: 500px;
      border: 10px solid black;
      /* 背景颜色 */
      background-color: antiquewhite;
      /* background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.rttt.net%2F2021%2F07%2F05%2Fcec7d3e1c7ad7.gif&refer=http%3A%2F%2Fimg.rttt.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668394527&t=b2e6f51abfc23f2abf2d7bde21a38b13); */
      /* background-image: url(../我的自画像2.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover; */
      background: url(../我的自画像2.jpg) 5px no-repeat;
      background-position: center;
      /* background-color: red; */
      background-color: green;
    }

    #div4 {
      width: 500px;
      height: 500px;
      border: 100px solid blue;
      background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F15%2F20161115204150_yRzdr.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668395819&t=6d87add0498ee751f6a402b8c082109a);
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgb(47, 175, 175);
    }
  </style>
</head>

<body>
  <!-- <h1>唯创前端无敌！！！</h1> -->

  <div id="div1">div1</div>


  <span class="sp">span1</span> <span class="sp">span2</span>

  <div id="div2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, repellendus? Praesentium dicta
    animi pariatur id ipsum numquam a. Vero cum fugiat consequatur saepe praesentium dolor omnis voluptas ipsum sed
    atque.
    <a href="#">12345rt6</a>
  </div>

  <ul>
    <li>12345</li>
    <li>12345</li>
    <li>12345</li>
    <li>12345</li>
  </ul>

  <div id="div3">
    背景颜色测试
  </div>
  <div id="div4">
    自己练习
  </div>


</body>

</html>